<template>
  <div class="original-text">
    <div class="original-text-head">
      <van-image height="15rem" fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg"/>
      <div class="original-text-left">
        <svg viewBox="0 0 1000 1000" class="demo-nav__back" @click="toBack">
          <path fill-rule="evenodd" fill="#969799" d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"></path>
        </svg>
        <van-image round fit="cover" width="1.5rem" height="1.5rem" src="https://img.yzcdn.cn/vant/cat.jpeg"/>
        <span>家居设计</span>
      </div>
      <div class="original-text-right">
        <van-icon name="share-o" size="20"/>
      </div>
    </div>
    <div class="original-text-content" align="left">
      <h1 style="font-size: 1.1rem">{{strategyDetail.strategyDetailTitle}}</h1>
      <h2 style="font-size: 0.8rem">方案说明</h2>
      <p>项目名称：{{strategyDetail.strategyDetailName}}</p>
      <p>项目地点：{{strategyDetail.strategyDetailPlace}}</p>
      <p>项目楼盘：{{strategyDetail.strategyDetailFloor}}</p>
      <p>项目面积：{{strategyDetail.strategyDetailArea}}㎡</p>
      <p>设计师：{{strategyDetail.strategyDetailDesigner}}</p>
      <p>案例说明：</p>
      <div>
        <p class="p-text-indent" v-for="strategyCase in strategyCaseList" :key="strategyCase.strategyCaseId">{{strategyCase.strategyCaseText}}</p>
      </div>

    </div>
    <div class="original-text-bottom">
      <div class="block-content-cen">
        <van-row span="8">
          <van-col span="14">
            <van-field v-model="value" placeholder="添加评论......" class="block-content-cen-input original-text-bottom-input"/>
          </van-col>
          <van-col span="8">
            <van-row>
              <van-col span="8">
                <div align="center">
                  <div><van-icon name="like-o" color="#777777" size="16"/></div>
                  <div style="font-size: 1rem">{{strategyDetail.strategy.constructionStrategyGood}}</div>
                </div>
              </van-col>
              <van-col span="8">
                <div align="center">
                  <div><van-icon name="star-o" color="#777777" size="16"/></div>
                  <div style="font-size: 1rem">{{strategyDetail.strategy.constructionStrategyCollection}}</div>
                </div>
              </van-col>
<!--              <van-col span="8">-->
<!--                <div align="center" @click="showPopup">-->
<!--                  <div><van-icon name="chat-o" color="#777777" size="16"/></div>-->
<!--                  <div style="font-size: 1rem">110</div>-->
<!--                </div>-->
<!--              </van-col>-->
            </van-row>
          </van-col>
        </van-row>
      </div>
    </div>
    <van-popup v-model="showP" closeable position="bottom" :style="{ height: '60%' }"></van-popup>
  </div>
</template>

<script>

  import { selectStrategyDetail,selectStrategyCaseList } from "@/api/constructionTeam/strategy.js";

  export default {
    name: "strategy_details",
    data(){
      return{
        showP: false,
        strategyDetail: Object,
        strategyCaseList:[],
        value:'',
      }
    },
    created() {
      var strategyId = this.$route.query.strategyId;
      this.getStrategyDetail(strategyId);
    },
    methods: {
      showPopup() {
        this.showP = true;
      },
      // 返回上一页
      toBack(){
        this.$router.go(-1);//返回上一层
      },
      // 查询施工攻略原文
      getStrategyDetail(strategyId){
        selectStrategyDetail(strategyId).then((res) =>{
          this.strategyDetail = res.data.data;
          this.getStrategyCaseList(res.data.data.strategyDetailId);
        })
      },
      getStrategyCaseList(strategyDetailId){
        selectStrategyCaseList(strategyDetailId).then((res) =>{
          this.strategyCaseList = res.data.data;
        })
      }
    }
  }
</script>

<style scoped>
  .original-text-head{
    position: relative;
  }
  .demo-nav__back{
    width: 24px;
    height: 24px;
  }
  .original-text-left{
    position: absolute;
    top: 0.6rem;
    left: 0.5rem;
    color: white;
    font-size: 0.8rem;
  }
  .original-text-left span{
    float: right;
    margin-top: 0.2rem;
    margin-left: 0.2rem;
  }
  .original-text-right{
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
  }
  .original-text-content{
    padding:0 2rem;
  }
  .original-text-content h1,h2{
    padding: 0.3rem 0;
  }
  .original-text-content p{
    padding: 0.3rem 0;
    font-size: 0.7rem;
    color: black;
  }
  .original-text-bottom{
    padding: 1rem 0 1rem 2rem;
  }
  .original-text-bottom-input{
    width: 80%;
    border-radius: 2rem;
    padding: 5px 16px;
    -moz-box-shadow:2px 2px 5px #333333;
    -webkit-box-shadow:2px 2px 5px #333333;
    box-shadow:2px 2px 5px #333333;
  }

</style>

